<template>
	<view>
		<view class="mt10" v-if="formlist.length">

			<view class="title">处理进度 </view>

			<view v-if="type == 'default'">
				<div class="van-steps van-steps--vertical" v-for="(item,index) in formlist" :key="index">
					<div class="van-steps__items" v-if="item.Row_ID">
						<div class="van-hairline van-step van-step--vertical van-step--process">
							<div class="van-step__title"
								:class="{'van-step__title--active':item.Operate_Name != '未处理'}">


								<h3 class="pt5 pb5 f15">【{{item.Step_Name}}】</h3>


								<p class="pt5 pb5"> {{item.Operate_Process}} </p>


								<view v-if="item.Operate_Name == '未处理'">{{item.OrgName}} {{item.TrueName}}
									{{item.Operate_Name}}
								</view>

								<view v-else>
									<p class="pt5 pb5">处理意见：{{item.Contents}}</p>
								</view>


							</div>

							<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon"
									:class="{'van-step__icon--active':item.Operate_Name != '未处理'}">
								</i>
							</div>
							<div class="van-step__line"></div>
						</div>
					</div>
				</div>

			</view>

			<view v-if="type == '_I'">

				<view v-html="formlist" class="p15 bg_white"></view>

			</view>

			<view v-if="type == '_O'">

				<div class="van-steps van-steps--vertical" v-for="(item,index) in formlist" :key="index">
					<div class="van-steps__items" v-if="item.Row_ID">
						<div class="van-hairline van-step van-step--vertical van-step--process">
							<div class="van-step__title"
								:class="{'van-step__title--active':item.Operate_Name != '未处理'}">


								<h3 class="pt5 pb5">【{{item.Step_Name}}】</h3>


								<p class="pt5 pb5"> {{item.Operate_Process}} </p>

								<view v-if="item.Operate_Name == '未处理'">{{item.OrgName}} {{item.TrueName}}
									{{item.Operate_Name}}
								</view>

								<view v-else>
									<p class="pt5 pb5">处理意见：{{item.Contents}}</p>
								</view>

							</div>

							<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon"
									:class="{'van-step__icon--active':item.Operate_Name != '未处理'}">
								</i>
							</div>
							<div class="van-step__line"></div>
						</div>
					</div>
				</div>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			Run_ID: {
				type: String,
				default: ""
			},
			uid: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				active: 1,
				formlist: [],
				type: "default"
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {

				if (!this.$gl.IsNullOrEmpty(this.Run_ID)) {

					let split = this.Run_ID.substring(this.Run_ID.length - 2)

					if (split == '_I') {

						this.type = '_I';

						this.$api.myAjaxFunc(API.IndexUrl.GetFlowRecord, {
							RunID: this.Run_ID,
						}, {
							loading: false
						}).then((res) => {

							let list = res.resultData;
							this.formlist = list.replace(/\r\n/gm, "<br/>");

						})


					} else if (split == '_O') {
						this.type = '_O';

					} else {

						this.$api.myAjaxFunc(Config.PlatformAPI + publicJs.Config.WorkFlowRun.ShowFlowProcess, {
							RunID: this.Run_ID,
						}, {
							loading: false
						}).then((res) => {

							let list = res.resultData.ds1;
							this.formlist = list;

						})

					}


				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.title {
		line-height: 35px;
		height: 35px;
		background: #C7C7C7;
		padding-left: 10px;
		font-weight: 800;
		font-size: 16px;
	}

	.bg_opinion {
		color: #07c160;
		color: #969799;
	}

	.bg_no_opinion {
		color: #969799;
	}

	.opinion_icon {
		position: relative;
		top: 8px;
		left: -20px;
		z-index: 1;
		font-size: 12px;
	}


	.opinion_text {
		padding-left: 32px;
		flex: 1;
	}
</style>
